<template>
  <view class="course-dir">
    <view v-for="(item,index) in props.chapterList" :key="item.chapterId">
     <text class="chapters text-ellipsis">第{{index+1}}章 {{item.name}}</text>
     <view class="sections row" :class="{active:index === props.activeObj.chapterIndex && sectionIndex === props.activeObj.sectionIndex}" @click="playVideo(index,sectionIndex,section)" v-for="(section,sectionIndex) in item.sectionList" :key="section.sectionId">
       <text class="iconfont icon-roundrightfill"></text>
       <view class="row">
         <text>{{index+1}}-{{sectionIndex+1}}</text>
         <text class="title text-ellipsis">{{section.name}}</text>
       </view>
       <text v-if="section.isFree && !props.isBuy" class="see">试看</text>
     </view>
    </view>
  </view>
</template>

<script setup lang="ts">
  import {getCurrentInstance,reactive} from 'vue'
  const props = defineProps({
    isBuy:Boolean,
    activeObj:{
     type:Object,
     default:()=>({
       chapterIndex:-1,
       sectionIndex:-1
     })
    },
    chapterList:{
      type:Array,
      default:()=>[
        {
          chapterId:1,
          name:"uniapp介绍",
          sectionList:[
            {
              sectionId:1,
              name:"什么是uniapp框架",
              isFree:1
            },
            {
              sectionId:2,
              name:"pages.json讲解",
              isFree:1
            },
            {
              sectionId:3,
              name:"开发helloworld项目",
              isFree:0
            },
            {
              sectionId:4,
              name:"安装开发插件uniapp框架",
              isFree:0
            }
          ]
        },
        {
          chapterId:2,
          name:"项目内容介绍",
          sectionList:[
            {
              sectionId:5,
              name:"首页开发",
              isFree:1
            },
            {
              sectionId:6,
              name:"封装轮播图组件",
              isFree:1
            },
            {
              sectionId:7,
              name:"封装分类展示组件",
              isFree:0
            },
            {
              sectionId:8,
              name:"封装课程组件",
              isFree:0
            }
          ]
        }
      ]
    }
  })
const {proxy} = getCurrentInstance()
const emit = defineEmits(['playVideo'])
const playVideo = (chapterIndex,sectionIndex,section) => {
  if(section.isFree || props.isBuy){
    emit('playVideo',{chapterIndex:chapterIndex,sectionIndex:sectionIndex,section:section,activeObj:props.activeObj})
  }else{
    proxy.$utils.msg('请先购买')
  }
}

</script>

<style scoped lang="scss">
  .text-ellipsis{
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    white-space: normal;
  }
  .course-dir{
    padding: 0 36rpx;
    .chapters{
      margin-top: 30rpx;
      margin-bottom: 10rpx;
      color: #000;
      font-size: 35rpx;
      font-weight: bold;
    }
    .sections{
      padding: 26rpx 0;
      font-size: 30rpx;
      border-bottom: .5px solid #efeff4;
      line-height: 40rpx;
      color: #3d3c40;
      text{
        margin-right: 10rpx;
      }
      .title{
        width: 470rpx;
      }
      .see{
        color: $mxg-text-color-blue;
        font-size: 25rpx;
        flex: 1;
        text-align: right;
      }
    }
    .active{
      color: $mxg-text-color-blue;
    }
  }
</style>